<template>
  <div class="welcome">
    <el-card class="welcome-card">
      <div slot="header" class="welcome-head">
        <i class="el-icon-message-solid"></i>
        <span>欢迎使用青年帮后台管理系统</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-calendar></el-calendar>
        </el-col>
        <el-col :span="12">
          <el-card class="tianqi-card" shadow="never">
            <div slot="header" class="tq-head">
              <i class="el-icon-sunny"></i>
              <span>最近3天的天气</span>
            </div>
            <el-card shadow="hover" v-for="(item,index) in tianqi" :key="index">
              <div class="tq-item">
                <div class="item-left">
                  <img :src="require('@/assets/imgs/tianqi/W'+ item.conditionIdDay + '.png')" alt="">
                  <span class="item-wendu">{{item.tempNight}} ~ {{item.tempDay}}°</span>
                  <span class="item-text">{{item.conditionDay}}/{{item.windDirDay}}</span>
                </div>
                <div class="item-right">
                  <h1>{{days[index]}}</h1>
                  <p>{{item.predictDate}}</p>
                </div>
              </div>
            </el-card>
          </el-card>
          <el-card shadow="never">
            <div slot="header" class="ar_title">
              <i class="el-icon-document-copy"></i>
            <span>项目介绍与说明</span>
            </div>
            <div class="ar_text">
              <p>本项目由北京工商管理专修学院web2103A班级开发，版权&copy;_an,未经许可授权，请勿作为商业使用</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {getTqData} from "../../network/api/api"

export default {
  name:"Welcome",
  data() {
    return {
      tianqi:[],
      days:["今天","明天","后天"]
    }
  },
  created() {
    //获取天气
    getTqData().then(res => {
      console.log(res)
      this.tianqi = res.data.data.forecast
    })
  },
}
</script>

<style lang="less" scoped>
  .welcome{
    .welcome-card{
      .welcome-head{
        font-size: 28px;
        font-weight: 600;
        color: #409EFF;
        i{
          margin-right: 10px;
        }
      }
      .tianqi-card{
        .tq-head{
          font-size: 20px;
          color: #67C23A;
          i{
            margin-right: 5px;
          }
        }
        .tq-item{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item-left{
            display: flex;
            align-items: center;
            .item-wendu{
              font-size: 30px;
              font-weight: 600;
              padding: 0 10px;
            }
            .item-text{
              font-size: 16px;
              color: #409EFF;
              margin-top: 15px;
            }
          }
          .item-right{
            text-align: right;
            h1{
              font-size: 30px;
              color: #67C23A;
              margin-bottom: 10px;
            }
            p{
              color: #999;
              font-size: 14px;
              letter-spacing: 0.2em;
            }
          }
        }
      }
    }
  }

  .ar_title{
    font-size: 24px;
    color: #409EFF;
    i{
      margin-right: 10px;
    }
  }
  .ar_text{
    p{
      color: #888;
      font-family: "微软雅黑";
      font-weight: 600;
      line-height: 30px;
    }
  }
</style>